<template>
  <div>
    <divider>会员卡类型</divider>
    <checker style="padding: 15px;"
        v-model="demo5"
        default-item-class="demo5-item"
        selected-item-class="demo5-item-selected">
      <checker-item style="margin: 5px 0;background-color: #fd6765;" key="1" value="1">
        <span>半年卡</span>
        <span>￥300</span>
      </checker-item>
      <checker-item style="margin: 5px 0;background-color: #87bde6;" key="2" value="2">
        <span>年卡</span>
        <span>￥600</span>
      </checker-item>
      <checker-item style="margin: 5px 0;background-color: #505b6f;" key="3" value="3">
        <span>终身会员</span>
        <span>￥5000</span>
      </checker-item>
    </checker>
    <br/>
    <div style="padding: 15px;">
      <x-button type="warn">办卡</x-button>
    </div>
  </div>
</template>

<script>
import { Divider, Card, Group, Cell, CellBox, Checker, CheckerItem, XButton } from 'vux'
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Card,
    Divider,
    Group,
    Cell,
    CellBox,
    Checker,
    CheckerItem,
    XButton
  },
  methods: {
    onItemClick (value, disabled) {
      console.log(value, disabled)
      if (!this.disabled) {
        this.showPopup = false
      }
    }
  },
  data () {
    return {
      items1: [{
        key: '1',
        value: 'A'
      }, {
        key: '2',
        value: 'B'
      }, {
        key: '3',
        value: 'C'
      }],
      demo1: '',
      demo11: null,
      demo12: {key: '2', value: 'B'},
      demo21: null,
      demo22: [{key: '2', value: 'B'}],
      demo23: null,
      demo1Checkbox: [2, 1],
      demo1CheckboxMax: ['2', '3'],
      demo2: '2',
      demo3: '',
      demo4: '花跟叶',
      showPopup: false,
      demo5: 1,
      demo6: [2, 3]
    }
  },
  created: function () {
    getAuthInfo('home')
  }
}
</script>

<style scoped>
.box {
  padding: 0 15px;
}

.demo5-item {
  width: 100%;
  height: 126px;
  line-height: 126px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6px;
}
.demo5-item-selected {
  background: #ffffff url(../../assets/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
</style>
